<template>
    <div>
        <h1>房号列表</h1>
        <a target="_blank" href="https://localhost:7203/api/Room/Dc">导出房号信息文件</a>

        <br>
        <select v-model="cs.tid">
            <option value="0">请选择状态</option>
            <option v-for="d in xl" :value="d.sid">{{ d.tname }}</option>
        </select>
        <select v-model="cs.fx">
            <option value="0">请选择房型</option>
            <option v-for="d in xl2" :value="d.typeid">{{ d.typeName }}</option>
        </select>
        <input type="button" value="查询" @click="show">
        <table class="table">
            <thead>
                <tr>
                    <td>
                        <input type="checkbox" v-model="quan" @change="qx">
                    </td>
                    <td>编号</td>
                    <td>房号</td>
                    <td>状态</td>
                    <td>电话</td>
                    <td>联系人</td>
                    <td>类型</td>
                    <td>图片</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="d in data">
                    <td>
                        <input type="checkbox" v-model="fanxuan" :value="d.rid">
                    </td>
                    <td>{{ d.rid }}</td>
                    <td>{{ d.num }}</td>
                    <td>
                        <span v-if="d.tname=='空闲'" style="color:green;">
                            {{ d.tname }}
                        </span>
                        <span v-if="d.tname=='已入住'" style="color:blue;">
                            {{ d.tname }}
                        </span>
                        <span v-if="d.tname=='维修'" style="color:red;">
                            {{ d.tname }}
                        </span>
                    </td>
                    <td>
                        {{ d.phone }}
                        <br>
                        {{ d.phone.substring(0,2)}} ** {{d.phone.substring(4,7)}} ** {{d.phone.substring(9,11)}}
                    </td>
                    <td>{{ d.pname }}</td>
                    <td>{{ d.typeName }}</td>
                    <td>
                        <img :src="'https://localhost:7203/'+d.imgUrl" style="width: 60px;height: 60px;">
                    </td>
                    <td>
                        <input type="button" value="删除" @click="del(d.rid)">
                        <input type="button" value="编辑" @click="upd(d.rid)">
                    </td>
                </tr>
            </tbody>
        </table>
        一共{{ cs.pcount }}页,一共{{ cs.count }}条,当前第{{ cs.index }}页,每页{{ cs.size }}条
        <br>
        <input type="button" value="首页" @click="fan(1)">
        <input type="button" value="上一页" @click="fan(2)">

        <input v-for="d in cs.pcount" type="button" :value="d" @click="shows(d)">

        <input type="button" value="下一页" @click="fan(3)">
        <input type="button" value="尾页" @click="fan(4)">
        <select v-model="cs.size" @change="yrl">
            <option value="2">每页2条</option>
            <option value="3">每页3条</option>
            <option value="5">每页5条</option>
            <option value="7">每页7条</option>
        </select>
        <input type="number" v-model="cs.index">
        <input type="button" value="跳转" @click="tz">
        <br>
        <a href="/add">房号新增</a>
    </div>
</template>

<script setup lang="ts">
import axios from 'axios'
import {ref,onMounted} from 'vue'
import { useRouter } from 'vue-router'
const router=useRouter()
//页码按钮
const shows=(d:any)=>{
    cs.value.index=d;
    show()
}
//跳转
const tz=()=>{
    if(cs.value.index>0 && cs.value.index<=cs.value.pcount){
        show()
    }
    else{
        cs.value.index=1;
        show()
    }
}
//页容量
const yrl=()=>{
    cs.value.index=1;
    show()
}
//翻页
const fan=(m:any)=>{
    if(m==1){
        cs.value.index=1;
        show()
    }
    if(m==2){
        if(cs.value.index>1){
            cs.value.index-=1;
            show()
        }
    }
    if(m==3){
        if(cs.value.index<cs.value.pcount){
            cs.value.index+=1;
            show()
        }
    }

    if(m==4){
        cs.value.index=cs.value.pcount;
        show()
    }
}

const data=ref([
    {
      "rid": 1,
      "num": "2301",
      "isdelete": false,
      "delTime": "2025-05-12T17:35:08.529151",
      "phone": "17531103135",
      "pname": "张三",
      "imgUrl": "/ds/202526120726201.jpg",
      "typeid": 1,
      "typeName": "大床房",
      "sid": 1,
      "tname": "空闲"
    }
])
onMounted(()=>{
    bang()
    bang2()
    show()
})
//参数
const cs=ref({
    index:1,
    size:2,
    fx:0,
    tid:0,
    count:0,
    pcount:0
})
//显示
const show=()=>{
    axios.get("https://localhost:7203/api/Room/GetRoom",{params:cs.value}).then(res=>{
        data.value=res.data.data
        cs.value.count=res.data.count
        cs.value.pcount=Math.ceil(cs.value.count/cs.value.size)
    })
}
//状态
const xl=ref({})
const bang=()=>{
    axios.get("https://localhost:7203/api/Room/GetStarts").then(res=>{
        xl.value=res.data
    })
}
//类型
const xl2=ref({})
const bang2=()=>{
    axios.get("https://localhost:7203/api/Room/GetType").then(res=>{
        xl2.value=res.data
    })
}
//删除
const del=()=>{
    if(confirm('您确定要删除吗')){
        axios.get("https://localhost:7203/api/Room/DelNum",{params:{id:fanxuan.value.toString()}}).then(res=>{
            if(res.data>0){
                alert('删除成功');
                show()
            }
            else{
                alert('删除失败');
                return;
            }
        })
    }
    
}
//全选
const quan=ref(false)
const fanxuan=ref([])
const qx=()=>{
    if(quan.value){
        data.value.forEach(a=>{
            fanxuan.value.push(a.rid)
        })
    }
    else{
        fanxuan.value=[]//清空
    }
}
//修改
const upd=(mid:any)=>{
    router.push({path:"/upd",query:{id:mid}})
}
</script>

<style scoped>

</style>